<template>
  <div class="app-container">
    <h4>标的信息</h4>
    <table
      class="table table-striped table-condenseda table-bordered"
      width="100%"
    >
      <tbody>
      <tr>
        <th width="15%">标的编号</th>
        <td width="35%">
          <b>{{ lendDetail.lend.lendNo }}</b>
        </td>
        <th width="15%">标题</th>
        <td width="35%">{{ lendDetail.lend.title }}</td>
      </tr>
      <tr>
        <th>标的金额</th>
        <td>{{ lendDetail.lend.amount }}元</td>
        <th>投资期数</th>
        <td>{{ lendDetail.lend.period }}个月</td>
      </tr>
      <tr>
        <th>年化利率</th>
        <td>
          标的：{{ lendDetail.lend.lendYearRate * 100 }}%
          <br />
          平台：{{ lendDetail.lend.serviceRate * 100 }}%
        </td>
        <th>还款方式</th>
        <td>{{ lendDetail.lend.params.returnMethod }}</td>
      </tr>

      <tr>
        <th>最低投资金额</th>
        <td>{{ lendDetail.lend.lowestAmount }}元</td>
        <th>发布日期</th>
        <td>{{ lendDetail.lend.publishDate }}</td>
      </tr>
      <tr>
        <th>开始日期</th>
        <td>{{ lendDetail.lend.lendStartDate }}</td>
        <th>结束日期</th>
        <td>{{ lendDetail.lend.lendEndDate }}</td>
      </tr>
      <tr>
        <th>已投金额</th>
        <td>
          <b>{{ lendDetail.lend.investAmount }}元</b>
        </td>
        <th>投资人数</th>
        <td>{{ lendDetail.lend.investNum }}人</td>
      </tr>
      <tr>
        <th>状态</th>
        <td>
          <b>{{ lendDetail.lend.params.status }}</b>
        </td>
        <th>创建时间</th>
        <td>{{ lendDetail.lend.createTime }}</td>
      </tr>
      <tr>
        <th>说明</th>
        <td colspan="3">
          <b>{{ lendDetail.lend.lendInfo }}</b>
        </td>
      </tr>
      </tbody>
    </table>

    <h4>平台收益信息</h4>
    <table
      class="table table-striped table-condenseda table-bordered"
      width="100%"
    >
      <tbody>
      <tr>
        <th width="15%">标的预期收益</th>
        <td width="35%">
          <b>{{ lendDetail.lend.expectAmount }}元</b>
        </td>
        <th width="15%">标的已获取收益</th>
        <td width="35%">{{ lendDetail.lend.realAmount }}元</td>
      </tr>
      </tbody>
    </table>

    <h4>借款人信息</h4>
    <table
      class="table table-striped table-condenseda table-bordered"
      width="100%"
    >
      <tbody>
      <tr>
        <th width="15%">借款人</th>
        <td width="35%">
          <b>{{ lendDetail.borrower.name }}</b>
        </td>
        <th width="15%">手机</th>
        <td width="35%">{{ lendDetail.borrower.mobile }}</td>
      </tr>
      <tr>
        <th>身份证</th>
        <td>{{ lendDetail.borrower.idCard }}</td>
        <th>性别</th>
        <td>{{ lendDetail.borrower.sex }}</td>
      </tr>
      <tr>
        <th>年龄</th>
        <td>{{ lendDetail.borrower.age }}</td>
        <th>是否结婚</th>
        <td>{{ lendDetail.borrower.isMarry }}</td>
      </tr>
      <tr>
        <th>学历</th>
        <td>{{ lendDetail.borrower.education }}</td>
        <th>行业</th>
        <td>{{ lendDetail.borrower.industry }}</td>
      </tr>
      <tr>
        <th>月收入</th>
        <td>{{ lendDetail.borrower.income }}</td>
        <th>还款来源</th>
        <td>{{ lendDetail.borrower.returnSource }}</td>
      </tr>
      <tr>
        <th>创建时间</th>
        <td>{{ lendDetail.borrower.createTime }}</td>
        <th>状态</th>
        <td>{{ lendDetail.borrower.status }}</td>
      </tr>
      </tbody>
    </table>

    <h4>投资记录</h4>
    <el-table :data="lendItemList" border stripe style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="120" />
      <el-table-column align="center" label="投资编号" prop="lendItemNo" width="120" />
      <el-table-column align="center" label="投资用户" prop="investName" width="120" />
      <el-table-column align="center" label="投资金额" prop="investAmount" width="122" />
      <el-table-column align="center" label="年化利率" width="100">
        <template slot-scope="scope">
          {{ scope.row.lendYearRate * 100 }}%
        </template>
      </el-table-column>
      <el-table-column align="center" label="投资时间" prop="investTime" width="200" />
      <el-table-column align="center" label="开始日期" prop="lendStartDate" width="200" />
      <el-table-column align="center" label="结束日期" prop="lendEndDate" width="200" />
      <el-table-column align="center" label="预期收益" prop="expectAmount" width="100" />
    </el-table>

    <h4>还款计划</h4>
    <el-table :data="lendReturnList" border stripe style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="70" />
      <el-table-column label="当前的期数" prop="currentPeriod" />
      <el-table-column label="本金" prop="principal" />
      <el-table-column label="利息" prop="interest" />
      <el-table-column label="本息" prop="total" />
      <el-table-column label="还款日期" prop="returnDate" width="150" />
      <el-table-column label="实际还款时间" prop="realReturnTime" />
      <el-table-column label="是否逾期">
        <template slot-scope="scope">
          <span v-if="scope.row.overdue">
            是（逾期金额：{{ scope.row.overdueTotal }}元）
          </span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          {{ scope.row.status === 0 ? '未还款' : '已还款' }}
        </template>
      </el-table-column>
    </el-table>

    <el-row style="text-align:center;margin-top: 40px;">
      <el-button @click="back">
        返回
      </el-button>
    </el-row>
  </div>
</template>

<script>

import lendApi from '@/api/core/lend'
import lendItemApi from '@/api/core/lend-item'

export default {
  name: 'Detail',
  data() {
    return {
      lendDetail: {
        lend: {
          params: {}
        },
        borrower: {
          borrowerAttachVOList: {}
        }
      },
      lendItemList: [],
      lendReturnList: []
    }
  },
  methods: {

    back() {
      this.$router.push('/core/lend/list')
    },

    fetchDataLendReturnList() {
      lendApi.getLendReturnList(this.$route.params.id)
        .then(response => {
          this.lendReturnList = response.data.lendReturnList
        })
        .catch(error => {
          console.log(error)
        })
    },

    fetchDataLendDetail() {
      lendApi.show(this.$route.params.id)
        .then(response => {
          if (response.code === 0) {
            this.lendDetail = response.data.list
            console.log(this.lendDetail)
          } else {
            this.$message.error(response.message)
          }
        })
        .catch(error => {
          //console.log(error)
        })
    },

    fetchDataLendItemList() {
      lendItemApi.list(this.$route.params.id)
        .then(response => {
          this.lendItemList = response.data.lendItemList
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  mounted() {
    //获取当前标的的详细信息
    this.fetchDataLendDetail()

    //获取当前标的的所有投资信息
    this.fetchDataLendItemList()

    //获取当前标的还款信息
    this.fetchDataLendReturnList()
  }
}
</script>

<style scoped>

</style>
